<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./../../oldVue.js"></script>
</head>

<body>
    <div id="app">
        <input v-if='ishow' :type="isNumber" v-model='num'/>
        <!-- 我是注释 -->
        <div v-for='(item, index) in num' :key='index'>{{item}}</div>
        <h2>开始存钱</h2>
        <div>每月存 :￥{{ money }}</div>
        <div>存:{{ num }}个月</div>
        <div>总共存款: ￥{{ total }}</div>
        <button @click="getMoreMoney">{{arryList[0].name}}多存一点</button>
        <msg-tip :msginfo='msgText' :totalnum='total'></msg-tip>
        
    </div>

    <script>
        debugger;
        // 定义一个新组件
        var a =  {
            props:['msginfo', 'totalnum'],
            data: function () {
                return {
                    count: 0
                }
            },
            template: '<div>{{ msginfo }}存了￥{{ totalnum }}</div>'
        }

        var app = new Vue({
            el: '#app',
            components: { msgTip: a},
            beforeCreate() { },
            created() { },
            beforeMount() { },
            mounted: () => { },
            beforeUpdate() { },
            updated() { },
            beforeDestroy() { },
            destroyed() { },
            data: function () {
                return {
                    money: 100,
                    num: 12,
                    arryList: [{name:'子树'}],
                    msgText: "优秀的乃古：",
                    isNumber: 'number',
                    ishow:false
                }
            },
            computed: {
                total() {
                    return this.money * this.num;
                }
            },
            watch:{
                money:{
                    handler(newVal, oldVal){
                        this.msgText = newVal+this.msgText
                    },
                    deep:true,
                    immediate:true
                }
            },
            methods: {
                getMoreMoney() {
                    this.money = this.money * 2
                    this.arryList.unshift({name: '大树'})
                }
            }
        })

    </script>

</body>

</html>


